<template>
    <div class="shopcar-container">
        <!-- 商品列表 -->
        <!-- <div class="shopcar-list" v-for="item in $store.state.shopcar" :key="item.id"> -->
        <div class="shopcar-list" v-for="(item, index) in shopList" :key="item.id">
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <mt-switch v-model="$store.getters.getSelected[item.id]"
                            @change="selectChange(item.id, $store.getters.getSelected[item.id])"
                        ></mt-switch>
                        <img :src="item.thumb_path" alt="">
                        <div class="info">
                            <h1>{{ item.title }}</h1>
                            <div >
                                <!-- 价格 -->
                                <span class="price">￥{{ item.sell_price }}</span>
                                <!-- 数量 -->
                                <numbox :num="item.cou" :item="item"></numbox>
                                <!-- 删除标签 -->
                                <a href="" @click.prevent="del(item.id, index)">删除</a>
                            </div>
                        </div>
					</div>
				</div>
			</div>
        </div>

        <!-- 结算区域 -->
        <div class="shopcar-result">
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <div>
                            <p>总计（不含运费）</p>
                            <!-- <p>已勾选商品<span class="red">{{staticCount}}</span>件，总价:<span class="red">￥{{staticPrice}}</span></p> -->
                            <p>已勾选商品<span class="red">{{this.$store.getters.getGoodsStatic.count}}</span>
                            件，总价:<span class="red">￥{{this.$store.getters.getGoodsStatic.price}}</span></p>                            
                        </div>
                        <mt-button type="danger" size="small">去结算</mt-button>
					</div>
				</div>
			</div>
        </div>
    </div>
        
</template>


<script>
import ShopCarNumbox from '../subcomponents/ShopCarNumbox.vue'

export default {
    data() {
        return {
            shopList: []
        }
    },
    mounted() {
        this.getShopCarList();
    },
    methods: {
        getShopCarList() {
            let ids = this.$store.getters.getIds;
            console.log(ids);
            if (ids.length === 0) {
                // 购物车为空
                return;
            }

            this.$http.get('api/goods/getshopcarlist/' + ids).then(result => {

                if (result.body.status === 0) {
                    // 查询成功                    
                    let goodsCount = this.$store.getters.getGoodsCount;
                    console.log(goodsCount);
                    result.body.message.forEach(item => {
                        item.cou = goodsCount[item.id];
                    })

                    // 更新数量信息
                    this.shopList = result.body.message;
                    console.log(this.shopList)
                }
            })
        },
        del(id, index) {
            // 删除商品
            this.$store.commit('remFromShopCar', id);
            this.shopList.splice(index, 1); // 删除缓存列表            
        },
        selectChange(id, status) {
            console.log(id, '----', status);
            this.$store.commit('updateSelected', {
                id: id, // 商品id
                selected: status    // 选择状态
            })
        }
    },

    computed: {
        staticCount: function() {
            let count = 0;
            this.shopList.forEach(item => {
                if (item.selected) {
                    count += item.cou;
                }
            })

            return count;
        },

        staticPrice: function() {
            let price = 0;
            this.shopList.forEach(item => {
                if (item.selected) {
                    price += item.cou * item.sell_price;
                }
            })

            return price;
        }
    },
    components: {
        'numbox': ShopCarNumbox
    }
}
</script>

<style lang="scss" scoped>
    .shopcar-container {
        // background-color: #eee;
        overflow: hidden;

        .shopcar-list {
            box-shadow: #eee;

            .mui-card-content-inner {
                display: flex;
                align-items: center;

                img {
                    width: 60px;
                    // height: 60px;
                }
            }

            .info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                h1 {
                    font-size: 14px;            
                }
                .price {
                    color: red;
                    font-weight: bold;            
                }
            }   
        }

        .shopcar-result {
            .mui-card-content-inner {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .red {
                    color: red;
                    font-weight: bold;
                    font-size: 15px;
                }
            }            
        }    
    }
</style>

